<template>
  <div style="width: 100%; height: 100%" class="test">
    <dv-page target="parent" fit  >
      <dv-screen>场景 一</dv-screen>
      <dv-screen>场景 二</dv-screen>
      <dv-screen>场景 三</dv-screen>
      <dv-indicator type="vertical" ></dv-indicator>
      <!-- <dv-box x-align="center" y-align="middle"  >
        <button @click="change">切换场景</button>
      </dv-box> -->
    </dv-page>
  </div> 
    
</template>
<script setup lang="ts" >
import {ref, onMounted, computed} from 'vue'; 
import {DvScreen, DvPage, DvBox, DvIndicator} from '$comp/index';
 
const index = ref(0)
const change = () => {
  index.value = Math.abs(++index.value % 3)
  console.log(index.value)
}
</script>
<style lang="scss" scoped>
.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   
 }

 .border-svg{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
 }
</style>
